<template>
  <eui-background type="common">
    <eui-navbar ref="EuiNavBar" title="商品价签列表" />
    <view class="footer">
      <eui-search-bar ref="RdsSearchBar" v-model="searchText" placeholder="请输入编码/名称/拼音码" radius="30"  @confirm="searchConfirm" />
      <scroll-view :scroll-top="0" scroll-y="true" style="height: auto;" @scrolltolower="loadMore">
        <eui-list-template type="index" :value="dateList" :title="false" refresher isImage 
                         @onRefresh='billQuery'>
          <template v-slot:index="item">
            <eui-text v-model="item.c_name" title="名称:" type="name" @click="()=>templateClick(item)" />
          </template>
        </eui-list-template>
      </scroll-view>
    </view>
  </eui-background>
</template>

<script setup type="ts">


import {computed, ref} from 'vue';
import {onLoad} from '@dcloudio/uni-app';
import service from '@/common/service';
import { getDictList, getDictName, getRelatedName } from '../../components/RelatedName';
import {getRdsUrl, rdsRequest} from '@/hooks/rdsServices';
import { useMainStore } from '@/store/modules/store';
import { useLoginStore } from '@/store/modules/useLoginStore';

const mainStore = useMainStore();
const LoginStore = useLoginStore();
const rdsUrl = getRdsUrl();
// MARK: - 响应式的数据
const dateList = ref([]);
const reflush = ref(true);
const current = ref('');
const c_height = ref(0);
const c_top = ref(0);
const height = ref(0);
const ISSearch = ref(false);
const search = ref('');
const c_store_id = ref('');
const c_gcode = ref('');
const c_type = ref('');
const searchText = ref('');
const CurrentPage = ref(1);
const PageSize = ref(20);
const RowsCount = ref(0);
const PageCount = ref(1);

const loginInfo = computed(() => state.loginInfo);

const uniBack = () => {
  commit('uniBack');
};

const searchClick = (e) => {
  ISSearch.value = !ISSearch.value;
};

const closePopupMain = () => {
  billQuery();
  popupRef.value.close();
};

const loadMore = () => {
  if (CurrentPage.value < PageCount.value) {
    CurrentPage.value += 1;
    billQuery(true);
  }
};

const billQuery = async () => {
  service.enjoyShowLoading('正在查询...');
  const req = {
    WhereList: [
      {c_col: 'c_store_id', c_logic: '而且', c_value: c_store_id.value, c_oper: '包含'},
      {c_col: 'c_use', c_logic: '而且', c_value: '1', c_oper: '等于'},
      {c_col: 'c_type', c_logic: '而且', c_value: c_type.value, c_oper: '等于'},
    ],
  };

  if (searchText.value) {
    req.WhereList.push({
      c_col: 'c_name',
      c_oper: '左相似',
      c_value: searchText.value,
      c_logic: '而且',
    });
  }

  const result = await rdsRequest(rdsUrl.bcApi, '弹窗通用查询', 'FetchGdsLabel', req);
  service.enjoyHideLoading();
  if (result.ReturnObject.length > 0) {
    dateList.value = result.ReturnObject;
  } else {
    uni.showToast({
      duration: 3500,
      icon: 'none',
      title: '未查询到数据',
      mask: true,
    });
  }
};


const templateClick = (e) => {
  let pages = getCurrentPages(); //获取所有页面栈实例列表
  let prevPage = pages[pages.length - 2]; //上一页页面实例
  prevPage.$vm.$.exposed.SelectionChanged({
    type: 'gdsLabel',
    c_guid: e.c_guid,
    c_name: e.c_name,
  });
  uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
    delta: 1
  });
};

const confirm = (t) => {
  switch (t) {
    case 'reset':
      break;
    case 'fix':
      c_gcode.value = search.value; //单据号
      billQuery();
      ISSearch.value = false;
      break;
  }
};

// MARK: - 搜索栏
const searchConfirm = async (e) => {
  searchText.value = e.value;
  await billQuery();
};

const getName = (key, value) => {
  return getRelatedName(key, value);
};

onLoad(async (options) => {
  c_store_id.value = options.storeId;
  c_type.value = options.c_type;
  await billQuery();
});


defineOptions({
  name: 'GdsLabel',
});
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: row;
  padding: 0;
}

.navigation {
  flex: 1;
}

// .bottom {
// 	height: 70rpx;
// 	display: flow-root;
// 	text-align: center;
// 	border-bottom-left-radius: $uni-border-radius-lg;
// 	border-bottom-right-radius: $uni-border-radius-lg;
// 	padding: $uni-spacing-col-sm*2 $uni-spacing-row-sm;
// 	background: $uni-bg-color;
// 	text-align: right;
// }

.bottom {
  flex: 1;
  display: flex;
}

.content-img {
  background-size: 100% 300rpx;
  background-repeat: no-repeat;
  min-height: 160rpx;
}

.content-search {
  background-size: 100% 300rpx;
  background-repeat: no-repeat;
}

.ISSearch {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.uni-list {
  background-color: #fff;
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
}

uni-radio-group,
uni-checkbox-group {
  width: 100%;
}

uni-radio-group {
  display: block;
}

.uni-list-cell {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}

.uni-list-cell-pd {
  padding: 10px 0px;
}

.uni-list-cell::after {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0px;
  height: 1px;
  content: "";
  -webkit-transform: scaleY(.5);
  transform: scaleY(.5);
  background-color: #c8c7cc;
}

.uni-list-cell:last-child::after {
  height: 0px;
}

.uni-list:after {
  position: absolute;
  z-index: 10;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  content: "";
  -webkit-transform: scaleY(.5);
  transform: scaleY(.5);
  background-color: #c8c7cc;
}

.menu-footer {
  display: flex;
  flex-direction: row;
  flex: auto;
  padding: 7px 12px;
  box-sizing: border-box;
}

.menu-footer button {
  height: 40px;
  border: none;
  border-radius: 5px;
  color: #fff;
  line-height: 40px;
}

uni-button:after {
  border: none;
}

.footer {
  margin: 0;
  flex: 8;
}

.center {
  flex: 12;
}

.m-list-template-image {
  margin: auto 0;
  text-align: center;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.reservationEllipsis {
  width: 50%;
  float: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

::v-deep .m-list-index-content {
  display: flex;
}
</style>
